<template>
  <el-header style="text-align: right; font-size: 12px">
    <el-dropdown>
      <i class="el-icon-setting" style="margin-right: 15px"></i>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="outLogin">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <span>{{ dataList.name }}</span>

  </el-header>
</template>
<script>
export default {
  name: 'Header',
  setup(props){
  const dataList = reactive({
  name: '',
  })
  dataList.name =  localStorage.getItem('Name')

  function outLogin(){
  window.location.href = 'http://localhost:8080/';
   //退出登录清除所有缓存
  localStorage.clear()
  }

return {
dataList,
outLogin
}}}
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-main {
  background-color: #fff;
  color: #333;
}

.every-div {
  margin-top: 20px;
}

</style>
